﻿@{
    ViewData["Title"] = "首页";
    var currentUser = Context.Session.GetString("UserName");
    var currentTime = DateTime.Now;
}

<!-- 欢迎区域 -->
<div class="welcome-section">
    <div class="welcome-info">
        <h2><i class="layui-icon layui-icon-home"></i> IMES工厂管理系统</h2>
        <p><i class="layui-icon layui-icon-user"></i> 当前用户: @currentUser</p>
        <p><i class="layui-icon layui-icon-time"></i> 登录时间: @currentTime.ToString("yyyy-MM-dd HH:mm:ss")</p>
        <p><i class="layui-icon layui-icon-date"></i> 当前日期: @currentTime.ToString("yyyy年MM月dd日 dddd")</p>
    </div>
</div>

<!-- 统计概览区域 -->
<div class="layui-row layui-col-space15">
    <!-- 生产统计 -->
    <div class="layui-col-md3">
        <div class="stat-card production-stat">
            <div class="stat-icon">
                <i class="layui-icon layui-icon-chart"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">1,234</div>
                <div class="stat-label">今日产量</div>
                <div class="stat-trend up">
                    <i class="layui-icon layui-icon-up"></i> +12.5%
                </div>
            </div>
        </div>
    </div>

    <!-- 工单统计 -->
    <div class="layui-col-md3">
        <div class="stat-card workorder-stat">
            <div class="stat-icon">
                <i class="layui-icon layui-icon-list"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">56</div>
                <div class="stat-label">进行中工单</div>
                <div class="stat-trend up">
                    <i class="layui-icon layui-icon-up"></i> +8.3%
                </div>
            </div>
        </div>
    </div>

    <!-- 不良品统计 -->
    <div class="layui-col-md3">
        <div class="stat-card defective-stat">
            <div class="stat-icon">
                <i class="layui-icon layui-icon-close"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">23</div>
                <div class="stat-label">不良品数量</div>
                <div class="stat-trend down">
                    <i class="layui-icon layui-icon-down"></i> -5.2%
                </div>
            </div>
        </div>
    </div>

    <!-- 库存统计 -->
    <div class="layui-col-md3">
        <div class="stat-card inventory-stat">
            <div class="stat-icon">
                <i class="layui-icon layui-icon-component"></i>
            </div>
            <div class="stat-content">
                <div class="stat-number">892</div>
                <div class="stat-label">库存物料</div>
                <div class="stat-trend stable">
                    <i class="layui-icon layui-icon-ok"></i> 正常
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 主要内容区域 -->
<div class="layui-row layui-col-space15">
    <!-- 左侧内容 -->
    <div class="layui-col-md8">
        <!-- 快速导航 -->
        <div class="layui-card">
            <div class="layui-card-header">
                <h3><i class="layui-icon layui-icon-navigation"></i> 快速导航</h3>
            </div>
            <div class="layui-card-body">
                <div class="quick-nav-grid">
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("UserManagement", "Account")'">
                        <i class="layui-icon layui-icon-user"></i>
                        <span>用户管理</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("RoleManagement", "Role")'">
                        <i class="layui-icon layui-icon-group"></i>
                        <span>角色管理</span>
                    </div>
                    <div class="quick-nav-item"
                        onclick="location.href='@Url.Action("PermissionManagement", "Permission")'">
                        <i class="layui-icon layui-icon-set"></i>
                        <span>权限管理</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "Route")'">
                        <i class="layui-icon layui-icon-template"></i>
                        <span>工艺路线</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "Process")'">
                        <i class="layui-icon layui-icon-cogs"></i>
                        <span>工序管理</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "WorkTask")'">
                        <i class="layui-icon layui-icon-list"></i>
                        <span>任务管理</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "SalesOrder")'">
                        <i class="layui-icon layui-icon-cart"></i>
                        <span>销售订单</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "WorkOrder")'">
                        <i class="layui-icon layui-icon-file"></i>
                        <span>工单管理</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "WorkReport")'">
                        <i class="layui-icon layui-icon-chart"></i>
                        <span>报工管理</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("CompletionSheet", "Production")'">
                        <i class="layui-icon layui-icon-file-b"></i>
                        <span>完工单</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "Defective")'">
                        <i class="layui-icon layui-icon-close"></i>
                        <span>不良品管理</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "DefectiveSummary")'">
                        <i class="layui-icon layui-icon-chart-screen"></i>
                        <span>不良品汇总</span>
                    </div>
                    <div class="quick-nav-item"
                        onclick="location.href='@Url.Action("Index", "DefectiveItemDistribution")'">
                        <i class="layui-icon layui-icon-chart"></i>
                        <span>不良品分布</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Balance", "Inventory")'">
                        <i class="layui-icon layui-icon-form"></i>
                        <span>库存余额</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "Team")'">
                        <i class="layui-icon layui-icon-group"></i>
                        <span>班组管理</span>
                    </div>
                    <div class="quick-nav-item" onclick="location.href='@Url.Action("Index", "Plan")'">
                        <i class="layui-icon layui-icon-calendar"></i>
                        <span>生产计划</span>
                    </div>
                    <div class="quick-nav-item dashboard-nav"
                        onclick="window.open('@Url.Action("Index", "Dashboard")', '_blank')">
                        <i class="layui-icon layui-icon-chart-screen"></i>
                        <span>管控大屏</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统状态 -->
        <div class="layui-card">
            <div class="layui-card-header">
                <h3><i class="layui-icon layui-icon-set"></i> 系统状态</h3>
            </div>
            <div class="layui-card-body">
                <div class="system-status">
                    <div class="status-item">
                        <span class="status-label">数据库连接</span>
                        <span class="status-value success">
                            <i class="layui-icon layui-icon-ok"></i> 正常
                        </span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">API服务</span>
                        <span class="status-value success">
                            <i class="layui-icon layui-icon-ok"></i> 正常
                        </span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">文件服务</span>
                        <span class="status-value success">
                            <i class="layui-icon layui-icon-ok"></i> 正常
                        </span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">系统负载</span>
                        <span class="status-value warning">
                            <i class="layui-icon layui-icon-help"></i> 中等
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧内容 -->
    <div class="layui-col-md4">
        <!-- 最近活动 -->
        <div class="layui-card">
            <div class="layui-card-header">
                <h3><i class="layui-icon layui-icon-log"></i> 最近活动</h3>
            </div>
            <div class="layui-card-body">
                <div class="activity-list">
                    <div class="activity-item">
                        <div class="activity-icon">
                            <i class="layui-icon layui-icon-user"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">用户登录</div>
                            <div class="activity-desc">@currentUser 登录系统</div>
                            <div class="activity-time">@currentTime.ToString("HH:mm")</div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="activity-icon">
                            <i class="layui-icon layui-icon-chart"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">生产报工</div>
                            <div class="activity-desc">工单WO-2024-001完成报工</div>
                            <div class="activity-time">@currentTime.AddMinutes(-15).ToString("HH:mm")</div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="activity-icon">
                            <i class="layui-icon layui-icon-file"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">工单创建</div>
                            <div class="activity-desc">新建工单WO-2024-002</div>
                            <div class="activity-time">@currentTime.AddMinutes(-30).ToString("HH:mm")</div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="activity-icon">
                            <i class="layui-icon layui-icon-cart"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">销售订单</div>
                            <div class="activity-desc">订单SO-2024-005已确认</div>
                            <div class="activity-time">@currentTime.AddMinutes(-45).ToString("HH:mm")</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快捷操作 -->
        <div class="layui-card">
            <div class="layui-card-header">
                <h3><i class="layui-icon layui-icon-add-1"></i> 快捷操作</h3>
            </div>
            <div class="layui-card-body">
                <div class="quick-actions">
                    <button class="layui-btn layui-btn-primary"
                        onclick="location.href='@Url.Action("Index", "WorkReport")'">
                        <i class="layui-icon layui-icon-chart"></i> 快速报工
                    </button>
                    <button class="layui-btn layui-btn-primary"
                        onclick="location.href='@Url.Action("Index", "WorkOrder")'">
                        <i class="layui-icon layui-icon-file"></i> 创建工单
                    </button>
                    <button class="layui-btn layui-btn-primary"
                        onclick="location.href='@Url.Action("Index", "SalesOrder")'">
                        <i class="layui-icon layui-icon-cart"></i> 销售订单
                    </button>
                    <button class="layui-btn layui-btn-primary"
                        onclick="location.href='@Url.Action("Index", "Defective")'">
                        <i class="layui-icon layui-icon-close"></i> 不良品登记
                    </button>
                </div>
            </div>
        </div>

        <!-- 系统信息 -->
        <div class="layui-card">
            <div class="layui-card-header">
                <h3><i class="layui-icon layui-icon-about"></i> 系统信息</h3>
            </div>
            <div class="layui-card-body">
                <div class="system-info">
                    <div class="info-item">
                        <span class="info-label">系统版本</span>
                        <span class="info-value">v2.1.0</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">运行时间</span>
                        <span class="info-value">15天 8小时</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">最后更新</span>
                        <span class="info-value">2024-01-15</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">技术支持</span>
                        <span class="info-value">IMES开发团队</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* 欢迎区域样式 */
    .welcome-section {
        margin-bottom: 20px;
    }

    .welcome-info {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .welcome-info h2 {
        margin: 0 0 15px 0;
        font-size: 24px;
        font-weight: 600;
    }

    .welcome-info p {
        margin: 8px 0;
        font-size: 14px;
        opacity: 0.9;
    }

    .welcome-info .layui-icon {
        margin-right: 8px;
        color: #fff;
    }

    /* 统计卡片样式 */
    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        transition: transform 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-2px);
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 24px;
        color: white;
    }

    .production-stat .stat-icon {
        background: linear-gradient(135deg, #667eea, #764ba2);
    }

    .workorder-stat .stat-icon {
        background: linear-gradient(135deg, #f093fb, #f5576c);
    }

    .defective-stat .stat-icon {
        background: linear-gradient(135deg, #4facfe, #00f2fe);
    }

    .inventory-stat .stat-icon {
        background: linear-gradient(135deg, #43e97b, #38f9d7);
    }

    .stat-content {
        flex: 1;
    }

    .stat-number {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
    }

    .stat-trend {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .stat-trend.up {
        color: #52c41a;
    }

    .stat-trend.down {
        color: #ff4d4f;
    }

    .stat-trend.stable {
        color: #1890ff;
    }

    .stat-trend .layui-icon {
        margin-right: 3px;
        font-size: 10px;
    }

    /* 快速导航样式 */
    .quick-nav-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 15px;
        padding: 10px 0;
    }

    .quick-nav-item {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 20px 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .quick-nav-item:hover {
        background: #e3f2fd;
        border-color: #2196f3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
    }

    .quick-nav-item .layui-icon {
        font-size: 24px;
        color: #2196f3;
        margin-bottom: 8px;
    }

    .quick-nav-item span {
        font-size: 12px;
        color: #333;
        font-weight: 500;
    }

    /* 大屏入口特殊样式 */
    .dashboard-nav {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border-color: #667eea !important;
    }

    .dashboard-nav:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
        border-color: #5a6fd8 !important;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
    }

    .dashboard-nav .layui-icon {
        color: white !important;
    }

    .dashboard-nav span {
        color: white !important;
        font-weight: 600 !important;
    }

    /* 系统状态样式 */
    .system-status {
        padding: 10px 0;
    }

    .status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .status-item:last-child {
        border-bottom: none;
    }

    .status-label {
        font-size: 14px;
        color: #333;
    }

    .status-value {
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .status-value.success {
        color: #52c41a;
    }

    .status-value.warning {
        color: #faad14;
    }

    .status-value.error {
        color: #ff4d4f;
    }

    .status-value .layui-icon {
        margin-right: 5px;
    }

    /* 活动列表样式 */
    .activity-list {
        max-height: 300px;
        overflow-y: auto;
    }

    .activity-item {
        display: flex;
        align-items: flex-start;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .activity-item:last-child {
        border-bottom: none;
    }

    .activity-icon {
        width: 32px;
        height: 32px;
        background: #e3f2fd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .activity-icon .layui-icon {
        font-size: 14px;
        color: #2196f3;
    }

    .activity-content {
        flex: 1;
        min-width: 0;
    }

    .activity-title {
        font-size: 13px;
        font-weight: 500;
        color: #333;
        margin-bottom: 3px;
    }

    .activity-desc {
        font-size: 12px;
        color: #666;
        margin-bottom: 3px;
    }

    .activity-time {
        font-size: 11px;
        color: #999;
    }

    /* 快捷操作样式 */
    .quick-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .quick-actions .layui-btn {
        width: 100%;
        text-align: left;
        padding: 12px 15px;
        border-radius: 6px;
    }

    .quick-actions .layui-btn .layui-icon {
        margin-right: 8px;
    }

    /* 系统信息样式 */
    .system-info {
        padding: 10px 0;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-size: 13px;
        color: #666;
    }

    .info-value {
        font-size: 13px;
        color: #333;
        font-weight: 500;
    }

    /* 卡片样式优化 */
    .layui-card {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
    }

    .layui-card-header {
        background: #fafafa;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 20px;
        border-radius: 8px 8px 0 0;
    }

    .layui-card-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        display: flex;
        align-items: center;
    }

    .layui-card-header .layui-icon {
        margin-right: 8px;
        color: #2196f3;
    }

    .layui-card-body {
        padding: 20px;
    }

    /* 响应式设计 */
    @@media (max-width: 768px) {
        .quick-nav-grid {
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 10px;
        }

        .stat-card {
            margin-bottom: 15px;
        }

        .welcome-info {
            padding: 20px;
        }

        .welcome-info h2 {
            font-size: 20px;
        }
    }
</style>

@section Scripts {
    <script>
        layui.use(['element'], function () {
            var element = layui.element;

            // 添加一些交互效果
            $('.quick-nav-item').hover(
                function () {
                    $(this).find('.layui-icon').addClass('layui-anim layui-anim-rotate');
                },
                function () {
                    $(this).find('.layui-icon').removeClass('layui-anim layui-anim-rotate');
                }
            );

            // 统计卡片点击效果
            $('.stat-card').click(function () {
                var type = $(this).hasClass('production-stat') ? 'production' :
                    $(this).hasClass('workorder-stat') ? 'workorder' :
                        $(this).hasClass('defective-stat') ? 'defective' : 'inventory';

                // 根据类型跳转到相应页面
                switch (type) {
                    case 'production':
                        location.href = '@Url.Action("Index", "WorkReport")';
                        break;
                    case 'workorder':
                        location.href = '@Url.Action("Index", "WorkOrder")';
                        break;
                    case 'defective':
                        location.href = '@Url.Action("Index", "Defective")';
                        break;
                    case 'inventory':
                        location.href = '@Url.Action("Balance", "Inventory")';
                        break;
                }
            });

            // 添加加载动画
            setTimeout(function () {
                $('.stat-card').each(function (index) {
                    var $this = $(this);
                    setTimeout(function () {
                        $this.addClass('layui-anim layui-anim-fadeInUp');
                    }, index * 100);
                });
            }, 300);
        });
    </script>
}
